<template>
	<view>
		<view>
			<!-- <image class="banner" :src="baseUrl + info.avatar"></image> -->
			<video @play="hanldePlay" v-if="videoLink" id="myVideo" :src="videoLink" @error="videoErrorCallback"
				@timeupdate="hanldeTimeupdate" controls></video>
		</view>

		<view class="">
			<view class="pad-30">{{info.title}}</view>
			<!-- <up-tabs :list="tabList" @click="click"></up-tabs> -->
			<view class="list-box">
				<view class="centerY mar-top-20 pad-30 list-bg" v-for="(item,index) in info.video" :key="index"
					@click="hanldeListTab(index)" :class="on == index ? 'bg-on': ''">
					<image class="image" src="@/static/image/media3.png" mode=""></image>
					<view class="mar-left-20">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 接口引入
	import {
		videoInfo,
		videoStart
	} from '/config/api.js';

	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		baseUrl
	} from '@/common/config.js'

	import {
		toast
	} from '@/uni_modules/uview-plus'
	
	// 开始学习
	const hanldePlay = () => {
		videoStart({
			subject_video_id: infoId.value, //课程id
			progress: "0%", //进度
			status: "100" //100 学习中 200 学习完成
		}).then(res=>{
			
		})
	}

	// 视频报错触发
	const videoErrorCallback = (e) => {
		toast('播放出错了，请先检查网络，退出重新进入观看');
	}

	// 获取进度
	let progress = ref('0')
	const hanldeTimeupdate = (event) => {
		const video = event.detail;
		progress.value = (video.currentTime / video.duration) * 100;
	}

	// 视频链接
	let videoLink = ref('');

	// 获取视频数据
	let info = ref('');
	const getDataInfo = () => {
		videoInfo({
			id: infoId.value
		}).then(res => {
			info.value = res.data;
			videoLink.value = res.data.video[0].link;
		})
	}

	// 切换播放的视屏
	let on = ref(0)
	const hanldeListTab = (inx) => {
		on.value = inx;
		videoLink.value = info.value.video[inx].link;
	}

	// 详情id
	const infoId = ref('')
	onLoad((param) => {
		infoId.value = param.id;
		getDataInfo()
	})
</script>

<style scoped lang="scss">
	.banner {
		display: block;
		width: 100%;
		height: 400rpx;
	}

	.image {
		display: block;
		width: 38rpx;
		height: 28rpx;
	}

	.list-box {
		border-top: 20rpx solid #f5f5f5;
	}

	.list-bg {
		background: rgba(46, 143, 255, 0.05);
	}

	.bg-on {
		background: rgba(46, 143, 255, 0.15);
	}

	#myVideo {
		display: block;
		width: 100%;
	}
</style>